// 获取 本地存储里面的 CMSTOKEN 
// 如果没有登录 不能访问首页 需要跳转到登录页面
const token = localStorage.getItem('CMSTOKEN')
if (!token) {
	alert('亲，您没有登录😊')
	location.href = './login.html'
}

/*
	1. 打开页面 发送ajax 请求 获取所有的成绩
		1.1 封装函数 getScoreList 
		1.2 在函数里面 发送 ajax 请求
		1.3 数据是否请求成功
		1.4 将数据渲染到页面上面 (****) 服务器响应的 对象
*/


const tbody = document.querySelector('tbody')

const getScoreList = () => {
	axios({
		url: '/score/list'
	}).then(({ data: res }) => {
		if (res.code !== 0) return Toast.fail(res.message)
		Toast.success(res.message)
		// console.log(res.data)
		tbody.innerHTML = Object.keys(res.data).map(item => `
			<tr>
				<th scope="row">${item}</th>
				<td>${res.data[item].name}</td>
				<td class="score" data-id="${item}" data-batch="1">${res.data[item].score[0]}</td>
				<td class="score" data-id="${item}" data-batch="2">${res.data[item].score[1]}</td>
				<td class="score" data-id="${item}" data-batch="3">${res.data[item].score[2]}</td>
				<td class="score" data-id="${item}" data-batch="4">${res.data[item].score[3]}</td>
				<td class="score" data-id="${item}" data-batch="5">${res.data[item].score[4]}</td>
			</tr>
		`).join('')
	})
}

getScoreList()

/*
	2. 鼠标点击 td 时 能够让 td 产生错觉 可以编辑
		2.1 需要采用事件委托注册事件
		2.2 怎么判断 是 后面的哪几个 td 呢？
		2.3 创建 input 标签 
		2.4 追加 input 标签
		2.5 让 input 自动获取焦点
		2.6 当 input 失去焦点时 将当前的Input删除即可
		2.7 给 Input 注册键盘按下 键盘抬起 需要判断按下是否是回车键 
		2.8 发送 ajax 给服务器 
*/

tbody.addEventListener('click', function (e) {
	if (e.target.dataset.id) {
		const inputNode = document.createElement('input')
		inputNode.classList.add('inp')
		inputNode.value = e.target.innerText
		// console.log(inputNode) 父对象.appendChild(要添加的子元素)
		e.target.appendChild(inputNode)
		inputNode.focus()
		inputNode.select()
		// 2.6 当 input 失去焦点时 将当前的Input删除即可
		inputNode.addEventListener('blur', function () {
			this.remove()
		})
		// 2.7 给 Input 注册键盘按下 键盘抬起 需要判断按下是否是回车键 
		inputNode.addEventListener('keydown', function (e) {
			if (e.key === 'Enter') {
				// console.log(this.value)
				const score = this.value
				const batch = this.parentNode.dataset.batch
				const stu_id = this.parentNode.dataset.id
				// console.log(score, batch, stu_id)
				axios({
					url: '/score/entry',
					method: 'post',
					data: {
						stu_id,
						batch,
						score
					}
				}).then(({ data: res }) => {
					// console.log(res)
					if (res.code !== 0) return Toast.fail(res.message)
					Toast.success(res.message)
					getScoreList()
				}).catch(err => {
					// console.dir(err)
					Toast.fail(err.response.data.message)
				})
			}
		})
	}
})